<template>
	<view>
		<searchHead goback='gobackF' title='龙虎榜' searchTip='searchimg' v-if="show_status"></searchHead>
		<view class="content">
			<u-sticky offset-top="0">
				<view>
					<view class="date_show">
						<text>{{calendar.date.year}}年{{calendar.date.month}}月{{calendar.date.day}}日</text>
						<u-icon name="calendar-fill" @click="calendar.show = true" :color="background.backgroundColor" size="38" style="padding-left: 5rpx;"></u-icon>
					</view>
					
					<!-- 正文内容 -->
					<u-tabs :list="list" bg-color="#efefef" :is-scroll="false" :bold="false" :active-color="background.backgroundColor" :current="current" @change="change"></u-tabs>
				</view>
			</u-sticky>
			<view class="table-box">
				<z-table :tableData="tableData" 
				:columns="columns" 
				:emptyText="emptyText"
				:showLoading="false"
				:stickSide="true" :tableHeight="tableHeight">
				</z-table>
				
				<view class="loding-box" v-if="is_loading">
					<u-loading mode="circle"></u-loading>
				</view>
			</view>
		</view>
		
		<!-- 各类弹窗 -->
		<view>
			<u-calendar v-model="calendar.show" :mode="calendar.mode" @change="calendarChange" :currentDate="calendar.currentDate"></u-calendar>
		</view>
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import zTable from "../../components/z-table/z-table.vue";
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
	export default {
		components: {
			searchHead,
			zTable
		},
		data() {
			//获取上一天
			let now = new Date();
			now = new Date(now.getTime() - 60*60*24*1000)
			let week = now.getDay();
			if(week == 0){
				now = new Date(now.getTime() - 60*60*24*2000)
			}else if(week == 6){
				now = new Date(now.getTime() - 60*60*24*1000)
			}
			return {
                show_status:false,
				is_loading:true,
				background: {
					backgroundColor: 'rgb(30, 30, 30)',
				},
				color:"#CCC",
				list: [{
						name: '全部'
					}, {
						name: '沪A'
					}, {
						name: '深A'
					}],				
				current: 0,
				tableHeight:((windowHeight - 82) * (750 / windowWidth)),
				tableData:[/* {
					"name": "<uni-view class='title'>长虹美菱</uni-view> <uni-view class='code'>000521</uni-view>",
					"code": "000521",
					"reason": "日涨幅偏离值达到7%的前5只证券",
					"up_down": "9.9757",
					"clean_buy": -2184.6,
					"buy": 7892.41,
					"buy_proportion": "-1.94%",
					"sell": 10077.01,
					"sproportion": "15.97%",
					"unscramble": "实力游资买入，成功率39.21%"
				}, */
				],
				emptyText:"",
				columns:[{
					'title':'股票名称',
					'key':'name',
					'width':'250',
				},{
					'title':'上榜原因',
					'key':'reason',
					'width':'500',
				},{
					'title':'涨跌幅',
					'key':'up_down',
					'width':'200',
				},{
					'title':'净买额(万)',
					'key':'clean_buy',
					'width':'200',
				},{
					'title':'买入额(万)',
					'key':'buy',
					'width':'200',
				},{
					'title':'买入额占比',
					'key':'buy_proportion',
					'width':'200',
				},{
					'title':'卖出(万)',
					'key':'sell',
					'width':'200',
				},{
					'title':'总成交额占比',
					'key':'sproportion',
					'width':'200',
				},{
					'title':'解读',
					'key':'unscramble',
					'width':'500',
				},
				],
				calendar:{
					show: false,
					mode: 'date',
					currentDate:`${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
					date:{
						day: now.getDate(),
						days: 0,
						isToday: true,
						month: now.getMonth() + 1,
						result: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
						week: "",
						year: now.getFullYear(),
					}
				},
			}
		},
		methods: {
			reload(){
				this.tableData = [];
				this.getTableData(this.current)
			},
			change(index) {
				this.current = index;
				this.tableData = [];
				this.getTableData(index)
			},
			calendarChange(e){
				this.calendar.date = e;
				this.tableData = [];
				this.getTableData(this.current)
			},
			getTableData(type){
				this.tableData = [];
				this.is_loading = true;
				this.tableHeight = 0;
				this.emptyText = ""
				this.$Request.get(this.$api.index.lhb_listdata,{
					type:type+1,
					time:this.calendar.date.result
				}).then(res => {
					if(res.code == 0){
						let data = res.data;
						for(let index in data){
							data[index].name = "<uni-view class='title'>"+data[index].name+"</uni-view> <uni-view class='code'>"+data[index].code+"</uni-view>"
							data[index].up_down = (Number(data[index].up_down)).toFixed(2) + '%'
						}
						this.tableData = data
						if(this.tableData.length == 0){
							this.emptyText = "没有数据哦！请选择其它时间查看~"
						}
					}else{
						this.emptyText = "没有数据哦！请选择其它时间查看~"
					}
					this.is_loading = false;
					this.tableHeight = (windowHeight - 82-45) * (750 / windowWidth);
					
				})
			}
		},
        onLoad(e) {
            if(e.status =='true'){
                this.show_status = true;
            }
        },
		created() {
			this.getTableData(this.current)
		}
	}
</script>

<style lang="less" scoped>
	.loding-box{
		height: 20rpx;
		text-align: center;
	}
	//table 样式修改
	/deep/.z-table {
		border: none;
		border-top: 2px solid #fdfdfd;
		.table-empty{
			margin-top: 20rpx;
		}
		.z-table-title {
			height: 90rpx;
			font-weight: bold;
			.z-table-title-item{
				background: #efefef;
				border: none;
				height: 100%;
			}
		}
		.z-table-col-text{
			text-align: center !important;
			font-size: 26rpx;
			uni-view{
				width: 100%;
			}
		}
		.z-table-stick-side{
			border: none;
		}
		.z-table-container-row{
			height: 90rpx;
			.z-table-container-col{
				line-height: unset !important;
				height: 100%;
				.title{
					font-size: 28rpx;
					font-weight: bold;
				}
				.code{
					font-size: 22rpx;
				}
			}
		}
	}
/* 	/deep/ .z-table .z-table-container-row{
		border-bottom: solid 0.5px #de2e2e;
	} */
	.date_show{
		background-color: #efefef;
		height: 70rpx;
		border-bottom: 2px solid #fdfdfd;
		text-align: center;
		line-height: 70rpx;
	}
	.list-title{
		background-color: #efefef;
		border-top: 1px solid #fdfdfd;
		height: 90rpx;
		font-weight: bold;
		.u-col{
			text-align: center !important;	
		}
	}
</style>
